<template>
  <div class="home-index">
    <div
      style="width: calc(100vw); height: calc(100vh); background: linear-gradient(#131427, #2A2C50); overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;">
      <vue-header @accountSecurityClick="accountSecurityClick" @loginOutClick="loginOutClick" :userName="userName"
        :userImages="userImages"></vue-header>
      <div
        :style="{ width: '100%', height: '86%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }">
        <div :style="{ width: '12%', marginTop: (51 / 96) + 'rem', marginRight: '1.09%' }">
          <sidebar :sidebarIndex="sidebarIndex" :sidebarList="sidebarList" @sidebarClick="sidebarClick"></sidebar>
        </div>
        <div
          :style="{ width: '85.7%', height: '100%', background: '#FFFFFF', border: (1 / 96) + 'rem solid #FFFFFF', borderRadius: (15 / 96) + 'rem', marginTop: (14 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
          <keep-alive>
            <router-view />
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { pageResize } from '../../utils/resetScreenSize.js'
  import Header from '../../components/Header'
  import Sidebar from '../../components/Sidebar'
  import { CLEAR } from '../../vuex/mutations-types'
  export default {
    name: 'MainPage',
    components: {
      VueHeader: Header,
      Sidebar: Sidebar
    },
    data () {
      return {
        userName: "ydsg",
        userImages: "../../static/Logo_image.png",
        sidebarIndex: "",
        sidebarList: [
          // {
          //   id: 1,
          //   title: "控制台",
          //   path: 'ConsolePage'
          // },
          {
            id: 2,
            // title: "大屏助手",
            title: "联赛管理",
            path: 'LeaguePage'
          }
        ]
      }
    },
    mounted () {
      pageResize();
      let path = this.$route.path.replace(new RegExp("/", "gm"), "");
      if (path == 'MatchPage') {
        path = 'LeaguePage'
      }
      this.sidebarIndex = path;
    },
    watch: {
      '$route.path' (newValue, oldValue) {
        // console.log(newValue, oldValue);
        let path = newValue.replace(new RegExp("/", "gm"), "");
        if (path == 'MatchPage') {
          path = 'LeaguePage'
        }
        this.sidebarIndex = path;
      }
    },
    methods: {
      accountSecurityClick () {
        this.$router.push({ name: "AccountSecurity" });
      },
      loginOutClick () {
        localStorage.removeItem('userInfo')
        let userInfo = localStorage.getItem('userInfo');
        if (!userInfo) {
          this.$router.replace({ name: 'Login' });
        }
      },
      sidebarClick (item) {
        this.sidebarIndex = item.path;
        this.$router.push({ name: item.path, params: {} });
        window.document.title = item.title;
      }
    },
    activated () {
      // let path = this.$route.path.replace(new RegExp("/","gm"),"");
      // this.sidebarIndex = path;
      let getUserInfo = JSON.parse(localStorage.getItem("userInfo"));
      if (getUserInfo != null) {
        this.userName = getUserInfo.nickname;
        this.userImages = getUserInfo.face ? getUserInfo.face : "../../static/user_head_default.png";
      }
    }
  }
</script>

<style scoped>
  .father .child {
    display: none;
  }

  .father:hover .child {
    display: block;
    z-index: 100;
  }

  .home-index {}

  .match-title-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }

  :-moz-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  ::-moz-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  input:-ms-input-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }

  input::-webkit-input-placeholder {
    font-family: KaiTi;
    font-weight: 400;
    color: #999999;
    opacity: 1;
  }
</style>